<script>
import AMapLoader from '@amap/amap-jsapi-loader';
export default {
    data() {
        return {
            map:null
        }
    },
    mounted() {
        this.initAMap();
    },
    unmounted() {
        this.map?.destroy();
    },
    methods: {
    initAMap() {
      window._AMapSecurityConfig = {
        securityJsCode: "7ced77c9f24b2179ffcef3ba72c9a841",
      };
      AMapLoader.load({
        key: "91b4dac2644d06b81b68e916b050fe30", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Scale",'AMap.ToolBar','AMap.LngLat','AMap.Marker'], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
      })
        .then((AMap) => {
          this.map = new AMap.Map("gdmap", {
            // 设置地图容器id
            viewMode: "3D", // 是否为3D地图模式
            zoom: 11, // 初始化地图级别
            center: [116.397428, 39.90923], // 初始化地图中心点位置
          });

          var toolbar = new AMap.ToolBar(); //缩放工具条实例化
          this.map.addControl(toolbar);

          //点标记显示内容
          const markerContent = `<div class="custom-content-marker">
            <img src="//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png">
            <div class="close-btn" onclick="clearMarker()">X</div>
            </div>`

            const position = new AMap.LngLat(116.397428, 39.90923); //Marker 经纬度
            const marker = new AMap.Marker({
            position: position,
            content: markerContent, //将 html 传给 content
            offset: new AMap.Pixel(-13, -30), //以 icon 的 [center bottom] 为原点
            });

            this.map.add(marker);
            // marker.setMap(this.map)

            const _this=this
           function clearMarker() {
            //这里的this指向点击事件的对象
                _this.map.remove(marker); //清除 marker
            }
            document.querySelector(".close-btn").onclick = clearMarker; //绑定点击事件

        })
        .catch((e) => {
          console.log(e);
        });
    },
  },
}
</script>
<template>
    <h4>
        高德地图
    </h4>
    <div id="gdmap"></div>
</template>
<style lang="scss" scoped>
    #gdmap{
        padding:0px;
        margin: 0px;
        width: 100%;
        height: 600px;
    }
</style>
